<template>
  <div id="material">
    <!--    <SubmitMaterialTop/>-->
    <!--    <div class="material-basic">-->
    <!--      <div class="material-basic-title">-->
    <!--        <img alt="" src="@/assets/images/submit-material-basic.png">-->
    <!--        <span>应急周转申请</span>-->
    <!--      </div>-->
    <!--    </div>-->
    <top-header/>
    <submitMaterialTop/>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <div class="material-basic-content" style="white-space: nowrap">
        <!--        <div class="material-basic-content-title">柳州市中小工业企业应急周转资金申请书</div>-->
        <div class="material-basic-content-list">
          <div class="material-basic-content-list-one">
            <dl>
              <dd>申请单位&nbsp;<span>{{ corporateInformation.enterprise_name }}</span></dd>
              <dd style="margin: 10% 0 ">法人代表 &nbsp;<span>{{ corporateInformation.corporate_representative }}</span>
              </dd>
              <dd>申请日期&nbsp;<span>{{ getDate }}</span></dd>
            </dl>
          </div>
        </div>
        <div class="material-basic-content-list">
          <!--借款信息-->
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="material-basic-content-list-two-title">借款信息</div>
            </el-col>
          </el-row>
          <!--申请企业名称-->
          <el-row :gutter="10">
            <el-col :span="4">
              <div>申请企业名称</div>
            </el-col>
            <el-col :span="12">
              <div></div>
            </el-col>
            <el-col :span="3">
              <div>营业执照号</div>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="businessLicenseNumber">
                <el-input v-model="ruleForm.businessLicenseNumber"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--办理联系人-->
          <el-row :gutter="10">
            <el-col :span="4">
              <div>办理联系人</div>
            </el-col>
            <el-col :span="3">
              <el-form-item prop="transactionLinkman">
                <el-input v-model="ruleForm.transactionLinkman"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <div style="text-align: center">职务</div>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="post">
                <el-input v-model="ruleForm.post"/>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <div>联系方式</div>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="contactInformation">
                <el-input v-model="ruleForm.contactInformation"/>
              </el-form-item>
            </el-col>
          </el-row>
          <!--申报企业类型-->
          <el-row :gutter="10">
            <el-col :span="4">
              <div>申报企业类型</div>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="enterpriseTrpe">
                <el-select v-model="ruleForm.enterpriseTrpe" placeholder="请选择" style="width: 100%">
                  <el-option label="新客户" value="5"/>
                  <el-option label="原应急周转客户" value="10"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!--申请金额-->
          <el-row :gutter="10">
            <el-col :span="4">
              <div>申请金额</div>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="applyForMoeny">
                <el-input
                    v-model.number="ruleForm.applyForMoeny"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                />
                <span>万元</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="material-basic-content-list">
          <div class="material-basic-content-list-three">
            <!--企业基本概况-->
            <el-row :gutter="10">
              <el-col :span="24">
                <div class="material-basic-content-list-two-title">企业基本概况</div>
              </el-col>
            </el-row>
            <!--法人代表-->
            <el-row :gutter="10">
              <el-col :span="4">
                <div>法人代表</div>
              </el-col>
              <el-col :span="12">
                <div>&nbsp;</div>
              </el-col>
              <el-col :span="3">
                <div>实际控制人</div>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="actualController">
                  <el-input
                      v-model.number="ruleForm.actualController"
                      oninput="value=value.replace(/[^\d.]/g,'')"/>
                </el-form-item>
              </el-col>
            </el-row>
            <!--成立时间-->
            <el-row :gutter="10">
              <el-col :span="4">
                <div>成立时间</div>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="estdate">
                  <el-date-picker
                      class="iconFou"
                      v-model="ruleForm.estdate"
                      type="date"
                      popper-class="date-style"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <div>所属行业</div>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="industryInvolved">
                  <el-input v-model="ruleForm.industryInvolved"/>
                </el-form-item>
              </el-col>
            </el-row>
            <!--注册地址-->
            <el-row :gutter="10">
              <el-col :span="4">
                <div>注册地址</div>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="registeredAddress">
                  <el-input v-model="ruleForm.registeredAddress"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <div>所属城（县）区</div>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="area">
                  <el-cascader
                      size="large"
                      :options="options"
                      v-model="ruleForm.area"
                  >
                  </el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <!--经营地址-->
            <el-row :gutter="10">
              <el-col :span="4">
                <div>经营地址</div>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="businessAddress">
                  <el-input v-model="ruleForm.businessAddress"/>
                </el-form-item>
              </el-col>
              <el-col :span="3"></el-col>
              <el-col :span="5"></el-col>
            </el-row>
            <!--员工人数-->
            <el-row :gutter="10">
              <el-col :span="4">
                <div>员工人数</div>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="staffNumber">
                  <el-input
                      v-model="ruleForm.staffNumber"
                      oninput="value=value.replace(/[^\d.]/g,'')"/>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <div>贷款卡号</div>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="creditCardNummber">
                  <el-input v-model="ruleForm.creditCardNummber"/>
                </el-form-item>
              </el-col>
            </el-row>
            <!--基本开户行-->
            <el-row :gutter="10">
              <el-col :span="4">
                <div>基本开户行</div>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="bankOpeningBank">
                  <el-input v-model="ruleForm.bankOpeningBank"/>
                </el-form-item>
              </el-col>
            </el-row>
            <!--经营范围-->
            <el-row :gutter="10">
              <el-col :span="4">
                <div>经营范围</div>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="businessScope">
                  <el-input v-model="ruleForm.businessScope"/>
                </el-form-item>
              </el-col>
            </el-row>
            <!--主要产品及业务-->
            <el-row :gutter="10">
              <el-col :span="4">
                <div>主要产品及业务</div>
              </el-col>
              <el-col :span="20">
                <el-form-item prop="mainProductsAndBusiness">
                  <el-input v-model="ruleForm.mainProductsAndBusiness"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <!--按钮-->
        <div style="text-align: center;margin-bottom: 10%">
          <el-row style="text-align: right">
            <el-button type="warning" size="medium">保存</el-button>
          </el-row>
          <el-row>
            <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
          </el-row>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>

import {regionData} from "element-china-area-data";
import submitMaterialBasic from "@/api/request/module/submitMaterialBasic";

import submitMaterialTop from "@/components/submit-material/submit-material-top";
import topHeader from "@/components/header/header";

export default {
  name: "submitMaterialBasic",
  components: {submitMaterialTop, topHeader},
  data() {
    return {
      getDate: '', // 当前日期
      value: '',
      options: regionData, // 地区数据
      corporateInformation: "",// 企业信息
      ruleForm: {
        businessLicenseNumber: '', // 营业执照号
        transactionLinkman: '', // 办理联系人
        post: '', // 职务
        contactInformation: '', // 联系方式
        enterpriseTrpe: '',// 企业申报类型,
        applyForMoeny: '', // 申请金额

        corporateRepresentative: '', // 法人代表
        actualController: '', // 实际控制人
        estdate: '', // 成立时间
        industryInvolved: '', // 所属行业
        registeredAddress: '', // 注册地址
        area: '', // 选择的地区
        businessAddress: '', // 经营地址
        staffNumber: '', // 员工人数
        creditCardNummber: '', // 贷款卡号
        bankOpeningBank: '', // 基本开户行
        businessScope: '', // 经营范围
        mainProductsAndBusiness: '' //主要产品及业务
      },
      rules: {
        businessLicenseNumber: [
          {required: true, message: '请输入营业执照号', trigger: 'blur'},
          { // 营业执照号校验 正则
            pattern: /(^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$)|(^\d{15}$)/,
            message: '请输入正确营业执照号',
            trigger: 'blur'
          }
        ],
        transactionLinkman: [
          {required: true, message: '请输入办理联系人', trigger: 'blur'}
        ],
        post: [
          {required: true, message: '请输入职务', trigger: 'blur'}
        ],
        contactInformation: [
          // {required: true, message: '请输入联系方式', trigger: 'blur'},
          // 添加正则表达式 pattern: /^1[3|5|7|8|9]\d{9}$/，验证手机号是否正确
          {trigger: 'blur', validator: this.contactInformation}
        ],
        enterpriseTrpe: [
          {required: true, message: '请输入企业申报类型', trigger: 'change'},
        ],
        applyForMoeny: [
          {validator: this.applyForMoeny, trigger: 'blur'},
        ],

        actualController: [
          {required: true, message: '请输入实际控制人', trigger: 'blur'},
        ],
        estdate: [
          {required: true, message: '请选择成立时间', trigger: 'blur'},
        ],
        industryInvolved: [
          {required: true, message: '请选择所属行业', trigger: 'blur'},
        ],
        registeredAddress: [
          {required: true, message: '请输入注册地址', trigger: 'blur'},
        ],
        area: [
          {required: true, message: '请选择地区', trigger: 'change'},
        ],
        businessAddress: [
          {required: true, message: '请输入经营地址', trigger: 'blur'},
        ],
        staffNumber: [
          {required: true, message: '请输入员工人数', trigger: 'blur'},
        ],
        creditCardNummber: [
          {trigger: 'blur', validator: this.bankAccountValid}
        ],
        bankOpeningBank: [
          {required: true, message: '请输入基本开户行', trigger: 'blur'},
        ],
        businessScope: [
          {required: true, message: '请输入经营范围', trigger: 'blur'},
        ],
        mainProductsAndBusiness: [
          {required: true, message: '请输入主要产品及业务', trigger: 'blur'},
        ],
      }
    }
  },
  methods: {
    //联系方式校验
    contactInformation(rule, value, callback) {
      if (!value) {
        // callback()
        return callback(new Error('联系方式不能为空'))
      } else {
        const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
        console.log(reg.test(value))
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的联系方式'))
        }
      }
    },
    // 申请金额校验
    applyForMoeny(rule, value, callback) {
      if (!value) {
        return callback(new Error('金额不能为空'));
      } else if (!Number.isInteger(value)) {
        callback(new Error('请输入数字值'));
      } else if (value < 200) {
        callback(new Error('申请金额范围在200-2500'));
      } else if (value > 2500) {
        callback(new Error('申请金额范围在200-2500'));
      } else {
        callback();
      }
    },
    // 贷款卡号校验
    bankAccountValid(rule, value, callback) {
      const strBin = '10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99'
      if (!value) {
        return callback(new Error('贷款卡号不能为空'))
      } else if (!Number.isInteger(+value)) {
        callback(new Error('贷款卡号必须全为数字'))
      } else if (value.trim().length < 12 || value.trim().length > 19) {
        callback(new Error('贷款卡号长度必须在12到19之间'))
      } else if (strBin.indexOf(value.substring(0, 2)) === -1) {
        callback(new Error('贷款卡号开头6位不符合规范'))
      } else {
        callback()
      }
    },
    //获取当前日期
    getNowDate() {
      let yy = new Date().getFullYear(); // 获取年份
      let mm = new Date().getMonth() + 1; // 获取月份
      let dd = new Date().getDate(); // 获取日期
      let hh = new Date().getHours(); // 获取小时
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes(); // 获取分
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds(); // 获取秒
      this.getDate1 = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss; // 拼接时间
      this.getDate = yy + '/' + mm + '/' + dd; // 拼接时间
    },
    //提交按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('成功');
          console.log(this.$refs.ruleForm.model)
          this.$router.push('/home/submit-material/submit-material-corporate')
        } else {
          console.log(this.$refs.ruleForm.model)
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取基本信息
    async getApplyHeader() {
      let res = await this.request.submitMaterialBasic.getApplyHeader();
      if (res.code === 200) {
        this.corporateInformation = res.data
      }
    }
  },
  created() {
    this.getNowDate() // 实例创建完成立即执行
  },
  mounted() {
    //实例挂载完毕前
    // 页面水印效果
    this.watermark.set("张万志")
    this.getApplyHeader()
  },
}

</script>

<style scoped src="./submit-material-basic.css">

</style>
